<template>
  <div class="message-page">
    <n-tabs default-value="全部消息" type="line">
      <n-tab-pane name="全部消息" tab="全部消息"></n-tab-pane>
      <template #suffix>
        <div v-if="tableInfo.tableData.length > 0">
          <n-checkbox
            v-model:checked="allCheck"
            :indeterminate="indeterminate"
            @update-checked="allCheckChange"
          >
            <span class="all-text">全部</span>
          </n-checkbox>
          <n-button quaternary type="error" @click="handMoreDel">删除</n-button>
          <n-button quaternary type="warning" @click="handAllRead">
            全部已读
          </n-button>
        </div>
      </template>
    </n-tabs>
    <div class="list">
      <template v-if="tableInfo.tableData.length === 0">
        <div class="empty">
          <n-empty size="large" description="暂无数据~"></n-empty>
        </div>
      </template>
      <template v-else>
        <div
          class="card flex hover-shadow"
          v-for="(item, index) in tableInfo.tableData"
          :key="index"
          @click="handRead(item)"
        >
          <div class="check" @click.stop="handStop">
            <n-checkbox
              v-model:checked="item.check"
              @update-checked="checkChange"
            ></n-checkbox>
          </div>
          <div class="avatar">
            <img class="avatar-img" src="@/assets/qyqrCode.png" alt="头像" />
            <div class="read" v-if="!item.isSystemRead"></div>
          </div>
          <div class="info">
            <div class="title">
              {{ item.title }}
            </div>
            <div
              class="desc"
              :class="{ 'desc-read': item.isSystemRead }"
              v-html="item.content"
            ></div>
            <div class="date">
              {{ item.createTime }}
            </div>
          </div>
          <div class="more">
            <span class="more-btn" @click.stop="handDel(index)">删除</span>
          </div>
        </div>
        <div class="pagination">
          <n-pagination
            v-model:page="tableInfo.queryForm.pageNo"
            :page-count="tableInfo.total"
            :page-sizes="tableInfo.pageSizes"
            show-quick-jumper
            show-size-picker
            @updatePage="pageChange"
            @updatePageSize="sizeChange"
          ></n-pagination>
        </div>
      </template>
    </div>
    <confirm-dia ref="confirmRef" title="确定删除吗？" @confirm="handConfirm" />
  </div>
</template>
<script setup lang="ts">
import {
  NTabPane,
  NTabs,
  NButton,
  NCheckbox,
  NPagination,
  NEmpty,
  useMessage
} from 'naive-ui'
import { ref, nextTick, inject, defineAsyncComponent } from 'vue'
import { useApi } from '@/hooks/useApi'
const $clone = inject('$clone') as <T>(data: T) => T
const ConfirmDia = defineAsyncComponent(
  () => import('@/components/ConfirmDia.vue')
)
const toast = useMessage()
const allCheck = ref(false)
const indeterminate = ref(false)
const checkChange = () => {
  nextTick(() => {
    allCheck.value = tableInfo.tableData.every(item => item.check)
    indeterminate.value =
      !allCheck.value && tableInfo.tableData.some(item => item.check)
  })
}
const handAllRead = async () => {
  toast.success('已全部设为已读')
  tableInfo.tableData.map((el: any) => {
    el.isSystemRead = true
    return el
  })
}
const confirmRef = ref()
let oldIndex = -1
const handMoreDel = () => {
  oldIndex = -1
  const ids = $clone(tableInfo.tableData)
    .filter((el: any) => el.check)
    .map((el: any) => {
      return el.id
    })
  if (ids.length === 0) {
    toast.error('请至少选择一条消息')
    return
  }
  confirmRef.value.open()
}
const handDel = (index: number) => {
  oldIndex = index
  confirmRef.value.open()
}
const handConfirm = async () => {
  let ids: any = []
  if (oldIndex === -1) {
    ids = $clone(tableInfo.tableData)
      .filter((el: any) => el.check)
      .map((el: any) => {
        return el.id
      })
  } else {
    ids = [tableInfo.tableData[oldIndex].id]
  }
  console.log(ids)
  toast.success('删除成功')
  if (oldIndex === -1) {
    queryData()
  } else {
    fetchData()
  }
}
const handStop = () => {
  //  阻断
}
const handRead = async (e: any) => {
  console.log(e)
  e.isSystemRead = true
}
const allCheckChange = (e: boolean) => {
  nextTick(() => {
    tableInfo.tableData.map(item => {
      item.check = e
    })
    indeterminate.value = false
  })
}

const { tableInfo, pageChange, sizeChange, queryData, fetchData } = useApi({
  isPaging: true,
  isRequest: true,
  getData: async () => {
    return {
      code: 0,
      data: {
        total: 1,
        data: [
          {
            isSystemRead: false,
            title: '我是标题',
            content: '我是内容',
            createTime: '2025-1-8'
          }
        ]
      }
    }
  },
  initForm: {},
  dataMap: (data: any) => {
    return data.map((el: any) => {
      el.check = false
      return el
    })
  }
})
</script>

<style scoped lang="scss">
.message-page {
  min-height: 1420px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #eeeeee;
  box-sizing: border-box;
  padding: 15px 24px;
  .empty {
    padding-top: 50px;
  }
  .all-text {
    font-size: 14px;
  }
  .list {
    .card {
      padding: 24px;
      border-bottom: 1px solid #eeeeee;
      cursor: pointer;
      .avatar {
        margin-left: 15px;
        position: relative;
        .avatar-img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          display: block;
          object-fit: cover;
        }
        .read {
          position: absolute;
          right: 0;
          top: 0;
          width: 10px;
          height: 10px;
          border: 2px solid #fff;
          border-radius: 50%;
          background: orangered;
        }
      }

      .info {
        flex: 1;
        margin: 0 20px;
        .title {
          font-size: 16px;
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          color: #333333;
        }
        .desc {
          margin-top: 12px;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #333;
          &-read {
            color: gray;
          }
        }
        .date {
          margin-top: 12px;
          font-size: 12px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #999999;
        }
      }
      .more {
        &-btn {
          font-size: 14px;
          color: orangered;
        }
      }
    }
  }
  .pagination {
    padding: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
